<template>
	<tui-keyboard :show="show" @close="closeKeyboard" @click="keyboardClick">
		<view class="tui-digital-box">
			<view class="tui-keyboard-tips">请输入支付密码</view>
			<tui-keyboard-input :inputvalue="pwdArr"></tui-keyboard-input>
		</view>
	</tui-keyboard>
</template>

<script setup>
import {ref} from 'vue';

// emits
const emits = defineEmits(['closesubmits', 'ok']);

const show = ref(false);
const pwdArr = ref(["", "", "", "", "", ""]);
const pwd = ref(["", "", "", "", "", ""]);

const open = () => {
	show.value = true;
};

const closeKeyboard = () => {
	show.value = false;
	pwdArr.value = ["", "", "", "", "", ""];
	pwd.value = ["", "", "", "", "", ""];
};
	
const keyboardClick = (e) => {
	console.log(e.index);
	if (e.index == 11) {
		// let lastIndex = this.pwdArr.findLastIndex(v => v === '●');
		let lastIndex = pwdArr.value.lastIndexOf('●');
		// this.pwdArr.fin
		if (lastIndex != -1) {
			pwdArr.value[lastIndex] = '';
			pwd.value[lastIndex] = '';
		}
	} else if (e.index == 9) {
		closeKeyboard();
		emits('closesubmits');
		return;
	} else {
		let emptyIndex = pwdArr.value.findIndex(v => v === '');
		let num = e.index < 10 ? (e.index + 1) : 0;
		if (emptyIndex != -1) {
			pwdArr.value[emptyIndex] = '●';
			pwd.value[emptyIndex] = num;
		}
	}
	let noEmpty = pwd.value.filter(v => v !== '')
	if (noEmpty.length == 6) {
		let pwd = noEmpty.join('')
		emits('ok', pwd);
		closeKeyboard();
	}
};

defineExpose({open});
</script>

<style lang="scss" scoped>
.tui-keyboard-tips {
	width: 100%;
	height: 120rpx;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	background: #fff;
	position: relative;
	color: #333;
	border: 0;
}

.tui-digital-box {
	background: #fff;
	padding-bottom: 50rpx;
	border: 0;
}
</style>